const reactive = Vue.reactive
const ref = Vue.ref
const shallowRef = Vue.shallowRef

/**
 * ref 的结构
 * 属性的深层响应性
 * 
*/
export default {
  name: 'ref-shallowRef',
  template: `
    <div>
      展示 shallowRef <br>
      基础类型：{{srefCount}} <br><br>
      引用类型：{{srefObject}} <br><br>
      嵌套引用类型：{{srefObjectMore}} <br><br>
      reactive的浅层ref：{{shallowRefRet}} <br><br>
      <el-button @click="setNumber" type="primary">修改基础类型</el-button><br><br>
      <el-button @click="setObjectProp" type="primary">修改对象属性</el-button><br><br>
      <el-button @click="setObject" type="primary">修改对象自己</el-button><br><br>
      <el-button @click="setObjectMoreProp" type="primary">修改嵌套对象的属性</el-button><br><br>
      <el-button @click="setObjectMore" type="primary">修改嵌套对象</el-button><br><br>
      <el-button @click="setObjectreactive" type="primary">修改reactive的浅层ref</el-button><br><br>
    </div>
  `,
  setup () {
    // 浅层的测试 
    // 基础类型
    const srefCount = shallowRef(0)
    console.log('refCount ', srefCount )

    // 引用类型
    const srefObject = shallowRef({ value: 0 })
    console.log('refObject ', srefObject )

    // 嵌套对象
    const srefObjectMore = shallowRef({ info: {a: 'jyk'} })
    console.log('shallowRef ', srefObjectMore )

    // reactive 的 shallowRef
    const ret = reactive({name: 'jyk'})
    const shallowRefRet = shallowRef(ret)
    console.log('shallowRefRet ', shallowRefRet )

    // ==================== 事件 ==================
    // 修改基础类型
    const setNumber = () => {
      srefCount.value = new Date().valueOf()
      console.log('srefCount ', srefCount )
    }

    // 修改引用类型的属性
    const setObjectProp = () => {
      srefObject.value.value = new Date().valueOf()
      console.log('srefObject ', srefObject )
    }
 
    // 修改引用类型的value
    const setObject = () => {
      srefObject.value = { value: new Date().valueOf() }
      console.log('srefObject ', srefObject )
    }

    // 修改嵌套引用类型的属性
    const setObjectMoreProp = () => {
      srefObjectMore.value.info.a = new Date().valueOf()
      console.log('srefObjectMore ', srefObjectMore )
    }
    
    // 修改嵌套引用类型的value
    const setObjectMore = () => {
      srefObjectMore.value = { qiantao: 1234567 }
      console.log('srefObjectMore ', srefObjectMore )
    }

    // 修改reactive 的浅层ref
    const setObjectreactive = () => {
      shallowRefRet.value.name = '浅层的reactive'
      console.log('shallowRefRet ', shallowRefRet )
    }

    return {
      srefCount, // 基础类型
      srefObject, // 引用类型
      srefObjectMore, // 嵌套引用类型
      shallowRefRet, // reactive 的浅层ref
      setNumber, // 修改属性
      setObjectProp, // 修改引用类型的属性
      setObject, // 修改引用类型的value
      setObjectMoreProp, // 修改嵌套引用类型的属性
      setObjectMore, // 修改嵌套引用类型的value
      setObjectreactive // 试一试reactive的浅层ref
    }
  }
}
  